<template>
  <div class="axios">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import axios from "axios";
/*
 get post
*/
export default {
  name: "AxiosInterceptor",
  props: {
    msg: String
  },
  components: {},
  created() {
    // 拦截器：请求或者响应被处理前拦截他们。use里面的是两个回调函数
    axios.interceptors.request.use(
      config => {
        // 在发送请求之前做些什么
        return config;
      },
      err => {
        // 在请求错误的时候处理一些东西
        return Promise.reject(err);
      }
    );

    // 响应拦截器
    axios.interceptors.response.use(
      res => {
        // 请求成功之后返回数据，处理之后交给接下来的请求具体方法处理
        return res;
      },
      err => {
        //   响应错误做些什么东西
        return Promise.reject(err);
      }
    );

    // 取消拦截器（仅作了解）

    let interceptors = axios.interceptors.request.use(config => {
      config.headers = {
        auth: true
      };
      return config;
    });
    // 取消（实际开发中不会取消的）
    axios.interceptors.request.eject(interceptors);

    //例子 登录状态（token:'加密后的个人信息'） 访问需要登录的接口

    let instance = axios.create({});

    instance.interceptors.request.use(config => {
      // 请求的时候自动加上token信息
      config.headers.token = "";
      return config;
    });

    // 返回不需要登录的接口
    let newInstance = axios.create({});

    // 移动端开发，讲究用户 体验度。时长，加一个等待样式。这个还是经常使用的。
    let instance_phone = axios.create({});

    instance_phone.interceptors.request.use(config => {
      //    请求前展示转圈弹框
      // $('#axios').show()
      return config;
    });

    instance_phone.interceptors.response.use(res => {
        // 请求处理成功之后关闭转转加载弹窗
      // $('#axios').hide()
      return res;
    });

    //   http://localhost:8080/data.json?id=12
    newInstance
      .get("/data.json", {
        params: {
          id: 12
        }
      })
      .then(res => {
        //   请求成功的处理
        console.info(res);
      })
      .catch(err => {
        // 请求失败的处理
        console.error(err);
      });

    axios({
      method: "get",
      url: "/data.json",
      params: {
        id: 11
      }
    }).then(res => {
      console.info(res);
    });

    // form-data表单提交（文件上传）
    // application/json提交数据。
    let data = {
      id: 13
    };
    axios.post("/post", data).then(res => {
      console.info(res);
    });

    axios({
      method: "post",
      url: "/post",
      params: data
    }).then(res => {
      console.info(res);
    });

    // form-data请求
    let formData = new FormData();
    for (let key in data) {
      formData.append(key, data[key]);
    }

    axios.post("/post", formData).then(res => {
      console.log(res);
    });

    //  处理并发请求，同时1请求后端的多个接口
    axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
      axios.spread((dataRes, cityRes) => {
        console.info(dataRes, cityRes);
      })
    );
  }
};
</script>